﻿<div class="sample_title">Basic Input LOV</div>

sample:<br />
<div class="sample_preview">
    <script type="text/javascript"><!--//--><![CDATA[//><!--
        $(document).ready(function() {
            // Create Form
            $('#form7').setupForm([
                {   name: 'api_input_lov7', type: 'lov',
                    onClearButton: function() { alert('Click Clear Button'); },
                    onActionButton: function() { alert('Click Action Button'); } 
                }
            ]);
        });
        //--><!]]></script>
    <form id="form7" onsubmit="return false;">
    <table class="tb_form" style="display:none;" cellpadding="0" cellspacing="0">
    <tr>
        <td class="label">Test Popup Input</td>
        <td><input id="api_input_lov7" /></td>
    </tr>
    </table>
    </form>
    
</div>
<br />
code:
<div class="sample_code" rel="brush: js; html-script: false;">
    &lt;script type="text/javascript"&gt
        $(document).ready(function() {
            // Create Form
            $('#form_master').setupForm([
                {   name: 'my_lov', type: 'lov',
                    onClearButton: function() { alert('Click Clear Button'); },
                    onActionButton: function() { alert('Click Action Button'); } 
                }
            ]);
        });
    &lt;/script&gt;
        
    &lt;form id="form_master" onsubmit="return false;"&gt;
    &lt;table class="tb_form" style="display:none;" cellpadding="0" cellspacing="0"&gt;
    &lt;tr&gt;
        &lt;td class="label"&gt;Test Popup Input&lt;/td&gt;
        &lt;td&gt;&lt;input id="my_lov" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/form&gt;
    <% for (int i = 0, max_i = 16; i < max_i; i++) { Response.Write("<br />"); } %>
</div><br />

<fieldset>
    <legend>Field Configuration</legend>
    <table class="tb_apiconfig">
    <tr>
        <td class="label">type</td>
        <td><font color="blue">(string) default: text</font><br />
            Set Type of field into <u>lov</u>
        </td>
    </tr>
    <tr>
        <td class="label">onClearButton</td>
        <td><font color="blue">(function)</font><br />
            Will executed after clear button clicked
        </td>
    </tr>
    <tr>
        <td class="label">onActionButton</td>
        <td><font color="blue">(function)</font><br />
            Will executed after action button clicked
        </td>
    </tr>
    </table>
</fieldset>

<br /><br /><br /><br />

<div class="sample_title">Input LOV with Popup Modal</div>

<div class="sample_preview">
    <script type="text/javascript"><!--//--><![CDATA[//><!--
        $(document).ready(function() {
            // Create Form
            $('#form8').setupForm([
                { name: 'province_code8', type: 'text', size: 'short', readonly:true },
                { name: 'province_name8', type: 'lov', onClearButton:function(){ $('#province_code8,#province_name8,#country_code8,#country_name8').setval(''); }, 
                  onActionButton:function(){
                        LOVprovince({ onSelect:function(data){ 
                            $('#province_code8').val( data.province_code );
		                    $('#province_name8').val( data.province_name );
		                    $('#country_code8').val( data.country_code );
		                    $('#country_name8').val( data.country_name );
		                    
		                    closePopup();
                        } }); 
                  }, 
                  autocomplete:{
                        source: gs_path + '/AjaxJSON/Province/',
	                    minLength: 2,
	                    select: function( event, ui ) {
		                    $('#province_code8').val( ui.item.value );
		                    $('#province_name8').val( ui.item.display );
		                    $('#country_code8').val( ui.item.country_code );
		                    $('#country_name8').val( ui.item.country_name );
		                    return false;
	                    }
                  }, typing:true, size: 'medium', noempty: true },
                { name: 'country_code8', type: 'text', size: 'short', readonly:true},
                { name: 'country_name8', type: 'text', size: 'medium', readonly:true} 
            ]);
        });
        //--><!]]></script>
    <form id="form8" onsubmit="return false;">
    <table class="tb_form" style="display:none;" cellpadding="0" cellspacing="0">
    <tr>
        <td class="label">Nama Provinsi</td>
        <td><input id="province_code8" /> <input id="province_name8" /></td>
    </tr>
    <tr>
        <td class="label">Negara</td>
        <td><input id="country_code8" /> <input id="country_name8" /></td>
    </tr>
    </table>
    </form>
    
</div>
<br />
First, we need to create LOV function in order to make it reusable..
<div class="sample_code" rel="brush: js; html-script: false;">
    &lt;script type="text/javascript"&gt
        var LOVprovince = function(ao_option){
	        try{
        		
		        if(ao_option==undefined){ ao_option={}; }
		        var lf_onSelect	= (ao_option.onSelect==undefined || typeof(ao_option.onSelect)!='function') ? function(){} : ao_option.onSelect;
        		
		        // Create Popup
		        var $popup	= openPopup({ title:'' });
        		
		        // Append Datagrid Container
		        var ls_gridName	= 'grid_'+$popup.attr('id');
		        $popup.html($('&lt;div&gt;').attr('id', ls_gridName));
        		
		        // Build Datagrid
		        $('#'+ls_gridName).grid({
			        title: 'Provinsi',
			        url: gs_path + '/LOV/SWProvince',
			        colModel: [{ name: 'province_code', label: 'Kode Provinsi'},
					           { name: 'province_name', label: 'Nama Provinsi', width:250 },
					           { name: 'cities', label: 'Jumlah Kota', type:'numeric', align:'right', width:70 },
					           { name: 'country_name', label: 'Nama Negara', width: 250}],
			        sortname: 'province_name',
			        multiselect:false,
			        onRowClick: lf_onSelect,
			        sortorder: 'asc',
			        searchitems: [	{ name: 'province_code', label: 'Kode Provinsi' },
					   		        { name: 'province_name', label: 'Nama Provinsi', isdefault: true }]
		        });
		        $('#'+ls_gridName+' .pSearch').trigger('click');
        		
	        } catch (err) { alert('Func. LOVprovince :\n' + err); }
        };
    &lt;/script&gt;
    <% for (int i = 0, max_i = 25; i < max_i; i++) { Response.Write("<br />"); } %>
</div><br /><br />
and then write code:
<div class="sample_code" rel="brush: js; html-script: false;">
    &lt;script type="text/javascript"&gt
        $(document).ready(function() {
            // Create Form
            $('#form_master').setupForm([
                { name: 'province_code', type: 'text', size: 'short', readonly:true },
                { name: 'province_name', type: 'lov', 
                  onClearButton:function(){
                        $('#province_code,#province_name,#country_code,#country_name').setval(''); 
                  }, 
                  onActionButton:function(){
                        LOVprovince({ onSelect:function(data){ 
                            $('#province_code').val( data.province_code );
		                    $('#province_name').val( data.province_name );
		                    $('#country_code').val( data.country_code );
		                    $('#country_name').val( data.country_name );
		                    
		                    closePopup();
                        } }); 
                  }, typing:true, size: 'medium', noempty: true },
                { name: 'country_code', type: 'text', size: 'short', readonly:true},
                { name: 'country_name', type: 'text', size: 'medium', readonly:true} 
            ]);
        });
    &lt;/script&gt;
        
    &lt;form id="form_master" onsubmit="return false;"&gt;
    &lt;table class="tb_form" style="display:none;" cellpadding="0" cellspacing="0"&gt;
    &lt;tr&gt;
        &lt;td class="label"&gt;Nama Provinsi&lt;/td&gt;
        &lt;td&gt;&lt;input id="province_code" /&gt; &lt;input id="province_name" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="label"&gt;Negara&lt;/td&gt;
        &lt;td&gt;&lt;input id="country_code" /&gt; &lt;input id="country_name" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/form&gt;
    <% for (int i = 0, max_i = 27; i < max_i; i++) { Response.Write("<br />"); } %>
</div><br />
